<template>
    <div class="test-component-page test-table" v-loading="isLoading">
        <t class="t1">{{ $t('使用示例') }}</t>
        <div v-if="isMounted">
            <component v-for="index in exampleLength" :key="index" :is="`example${index}`"></component>
        </div>
        <config-table title="Table 属性" step="attributes" :table-data="attributeData"></config-table>
        <config-table title="Table 事件" step="events" :table-data="eventData"></config-table>
        <config-table title="Table 插槽" step="slots" :table-data="slotData"></config-table>
        <config-table title="Table 方法" step="refs" :table-data="refData"></config-table>

        <el-backtop target=".main-container"></el-backtop>
    </div>
</template>

<script>
import { useStore } from 'vuex';
import { ref, nextTick, onMounted } from 'vue';
import getFieldsDescrible from '../../utils/form-fields-desc';
import getTableColumnDescrible from '../../utils/table-column-desc';
import getIndexConfigDescrible from '../../utils/index-config-desc';
import getPageParamKeysDescrible from '../../utils/page-param-keys-desc';
import getRequestConfigDescrible from '../../utils/request-config-desc';

let exampleLength = 16;
const components = {};
Array(exampleLength).fill().forEach((_, i) => {
    const example = `example${i + 1}`;
    let component;
    // eslint-disable-next-line
    try { component = require(`./${example}`).default; } catch (error) { exampleLength--; }
    if (component) components[example] = component;
});

export default {
    components,
    setup() {
        const store = useStore();
        const isMounted = ref(false);
        const isLoading = ref(true);
        // 示例太多，加载卡顿，这里用遮罩过渡一下
        onMounted(() => {
            setTimeout(() => {
                isMounted.value = true;
                nextTick(() => {
                    store.commit('updateArticleTree');
                    setTimeout(() => {
                        isLoading.value = false;
                    }, 1000);
                });
            }, 200);
        });

        return {
            exampleLength,
            isMounted,
            isLoading,
            attributeData: [
                {
                    params: 'index-config',
                    des: '列表首列配置项; 详细配置请查看下方【index-config 配置项】',
                    type: 'Object',
                    values: '-',
                    defaultVal: '{ label: "序号", type: "index", width: 60 }',
                    details: [
                        {
                            title: '配置项【index-config】',
                            describes: ['用于设置列表首列的类型及相关特殊化配置'],
                            configList: getIndexConfigDescrible(),
                        },
                    ],
                },
                {
                    params: 'search-config',
                    des: '列表查询模块配置项; 详细配置请查看下方【search-config 配置项】',
                    type: 'Object',
                    values: '-',
                    defaultVal: '-',
                    details: [
                        {
                            title: '配置项【search-config】',
                            describes: ['用于设置列表查询模块相关功能的配置字段'],
                            configList: getFieldsDescrible('table'),
                        },
                    ],
                },
                {
                    params: 'table-column',
                    des: '表格列的配置项; 详细配置请查看下方【table-column 公共配置项】及特殊配置项',
                    type: 'Array',
                    values: '-',
                    defaultVal: '-',
                    details: [
                        {
                            title: '公共配置项【table-column】',
                            describes: [
                                'table-column 配置项内可根据配置不同的 type，从而展示不同类型的快捷列，快捷列存在对应的特殊配置项',
                                '此处为公共配置项，其针对所有类型的快捷列均生效',
                            ],
                            configList: getTableColumnDescrible('common'),
                        },
                        {
                            title: '特殊配置项【type="image"】',
                            describes: [
                                '当在 table-column 子配置项内配置了 type 为 "image" 时，表示该列单元格内均以图片的方式展示，并支持传入以下额外配置',
                            ],
                            configList: getTableColumnDescrible('image'),
                        },
                        {
                            title: '特殊配置项【type="button"】',
                            describes: [
                                '当在 table-column 子配置项内配置了 type 为 "button" 时，表示该列单元格内均以按钮的方式展示，并支持传入以下额外配置',
                            ],
                            configList: getTableColumnDescrible('button'),
                        },
                        {
                            title: '特殊配置项【type="timeStamp"】',
                            describes: [
                                '当某列单元格内的值是时间戳格式，需要转换成时间文本展示时，你可以在 table-column 子配置项内配置 type 为 "timeStamp"，那么该列将自动格式化时间并按照你指定的规则展示；支持传入以下额外配置',
                            ],
                            configList: getTableColumnDescrible('timeStamp'),
                        },
                        {
                            title: '特殊配置项【type="tag"】',
                            describes: [
                                '当在 table-column 子配置项内配置了 type 为 "tag" 时，表示该列单元格内均以 tag标签 的方式展示，并支持传入以下额外配置',
                            ],
                            configList: getTableColumnDescrible('tag'),
                        },
                        {
                            title: '特殊配置项【type="switch"】',
                            describes: [
                                '当在 table-column 子配置项内配置了 type 为 "switch" 时，表示该列单元格内均以开关滑块的方式展示，并支持传入以下额外配置',
                            ],
                            configList: getTableColumnDescrible('switch'),
                        },
                        {
                            title: '特殊配置项【type="popover"】',
                            describes: [
                                '当在 table-column 子配置项内配置了 type 为 "popover" 时，表示该列单元格内均以浮窗提示框的方式展示，支持自定义提示框内容，并支持传入以下额外配置',
                            ],
                            configList: getTableColumnDescrible('popover'),
                        },
                        {
                            title: '特殊配置项【type="clickInput"】',
                            describes: [
                                '当在 table-column 子配置项内配置了 type 为 "clickInput" 时，表示该列单元格内均以文本的方式展示，点击时变成输入框，支持修改内容和自定义提交方法，并支持传入以下额外配置',
                            ],
                            configList: getTableColumnDescrible('clickInput'),
                        },
                    ],
                },
                {
                    params: 'table-data',
                    des: '列表数据（若配置了requestConfig，则该字段会被自动忽略）',
                    type: 'Array',
                    values: '-',
                    defaultVal: '-',
                },
                {
                    params: 'request-config',
                    des: '通过接口请求表格数据的配置；详情请查阅下方说明',
                    type: 'Object',
                    values: '-',
                    defaultVal: '-',
                    details: [
                        {
                            title: '配置项【request-config】',
                            describes: [
                                '除以下字段外，request-config 还支持传入axios的所有可配置参数，详细配置说明请查阅 https://github.com/axios/axios#request-config',
                            ],
                            configList: getRequestConfigDescrible('table'),
                        },
                    ],
                },
                {
                    params: 'page-param-keys',
                    des: '组件内部在通过接口请求数据时，默认会把排序和分页相关的字段也组装到接口参数内，如果后台接口的分页、排序字段的 key 和组件内默认的不一致，那么你可以通过 pageParamKeys 来替换这些字段的key；',
                    type: 'Object',
                    values: '-',
                    defaultVal: '请查阅下方【page-param-keys 配置项】说明',
                    details: [
                        {
                            title: '配置项【page-param-keys】',
                            describes: [
                                'page-param-keys 用于指定分页、排序的字段名，以及排序规则升序/降序的值',
                            ],
                            configList: getPageParamKeysDescrible(),
                        },
                    ],
                },
                {
                    params: 'row-key',
                    des: 'rowKey 为每一行的唯一键，组件内默认取每一行的id，注意：如果每行数据存在唯一id则可省略传入该属性，否则需要传入 rowKey 来指定唯一键以确保勾选行数据、筛选表格数据等功能正常',
                    type: 'String',
                    values: '-',
                    defaultVal: '\'id\'',
                },
                {
                    params: 'save-selected',
                    des: '是否在每次刷新列表时都保存已勾选的数据，仅在 indexConfig.type = \'selection\' 时有效',
                    type: 'Boolean',
                    values: 'true | false',
                    defaultVal: 'false',
                },
                {
                    params: 'selection',
                    des: '初始选中的行，支持传值 [\'id1\', \'id2\'] 或 [row1, row2, row3]，组件内部根据rowKey（未配置时，默认为id）与列表数据来匹配某一行是否被选中。仅在 indexConfig.type = \'selection\' 时有效',
                    type: 'Array',
                    values: '-',
                    defaultVal: '',
                },
                {
                    params: 'refresh-on-reset',
                    des: '是否支持点击重置按钮时刷新列表',
                    type: 'Boolean',
                    values: 'true | false',
                    defaultVal: 'true',
                },
                {
                    params: 'show-pagination',
                    des: '是否需要分页控件',
                    type: 'Boolean',
                    values: 'true | false',
                    defaultVal: 'true',
                },
                {
                    params: 'show-refresh-btn',
                    des: '是否需要手动刷新列表按钮（配置 requestConfig 时生效）',
                    type: 'Boolean',
                    values: 'true | false',
                    defaultVal: 'true',
                },
                {
                    params: 'layout',
                    des: '分页配置',
                    type: 'String',
                    values: 'sizes, prev, pager, next, jumper, ->, total, slot',
                    defaultVal: '\'total, sizes, prev, pager, next, jumper\'',
                },
                {
                    params: 'default-page',
                    des: '默认展示的页码',
                    type: 'Number',
                    values: '-',
                    defaultVal: '1',
                    version: '1.0.10',
                },
                {
                    params: 'page-size',
                    des: '每页显示条目个数',
                    type: 'Number',
                    values: '-',
                    defaultVal: '10',
                },
                {
                    params: 'page-sizes',
                    des: '每页显示个数选择器的选项设置',
                    type: 'Array',
                    values: '-',
                    defaultVal: '[10, 20, 50, 100]',
                },
                {
                    params: 'pager-count',
                    des: '最大页码按钮数（当总页数超过 7 页时，Pagination 会折叠多余的页码按钮）',
                    type: 'Number',
                    values: '-',
                    defaultVal: '7',
                    version: '1.0.5-test',
                },
                {
                    params: 'show-pagination-background',
                    des: '是否为分页按钮添加背景色',
                    type: 'Boolean',
                    values: 'true | false',
                    defaultVal: 'true',
                    version: '1.0.5-test',
                },
                {
                    params: 'height',
                    des: '组件高度',
                    type: 'String | Number',
                    values: '-',
                    defaultVal: '-',
                },
                {
                    params: 'stripe',
                    des: '是否为斑马纹列表',
                    type: 'Boolean',
                    values: 'true | false',
                    defaultVal: 'false',
                },
                {
                    params: 'border',
                    des: '表格是否带有纵向边框',
                    type: 'Boolean',
                    values: 'true | false',
                    defaultVal: 'false',
                },
                {
                    params: 'size',
                    des: '组件整体尺寸',
                    type: 'String',
                    values: 'large/small/mini',
                    defaultVal: '\'small\'',
                },
                {
                    params: 'fit',
                    des: '列的宽度是否自撑开',
                    type: 'Boolean',
                    values: 'true | false',
                    defaultVal: 'true',
                },
                {
                    params: 'show-header',
                    des: '是否显示表头',
                    type: 'Boolean',
                    values: 'true | false',
                    defaultVal: 'true',
                },
                {
                    params: 'highlight-current-row',
                    des: '是否要高亮当前行',
                    type: 'Boolean',
                    values: 'true | false',
                    defaultVal: 'false',
                },
                {
                    params: 'current-row-key',
                    des: '当前行的 key，只写属性',
                    type: 'String | Number',
                    values: '',
                    defaultVal: '-',
                },
                {
                    params: 'row-class-name',
                    des: '行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className',
                    type: 'String | Function({ row, rowIndex })',
                    values: '-',
                    defaultVal: '-',
                },
                {
                    params: 'row-style',
                    des: '行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style',
                    type: 'Object | Function({ row, rowIndex })',
                    values: '-',
                    defaultVal: '-',
                },
                {
                    params: 'cell-class-name',
                    des: '单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className',
                    type: 'String | Function({row, column, rowIndex, columnIndex})',
                    values: '-',
                    defaultVal: '-',
                },
                {
                    params: 'cell-style',
                    des: '单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style',
                    type: 'Object | Function({ row, column, rowIndex, columnIndex })',
                    values: '-',
                    defaultVal: '-',
                },
                {
                    params: 'header-row-class-name',
                    des: '表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className',
                    type: 'String | Function({ row, rowIndex })',
                    values: '-',
                    defaultVal: '-',
                },
                {
                    params: 'header-row-style',
                    des: '表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style',
                    type: 'Object | Function({ row, rowIndex })',
                    values: '-',
                    defaultVal: '-',
                },
                {
                    params: 'header-cell-class-name',
                    des: '表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className',
                    type: 'String | Function({ row, column, rowIndex, columnIndex })',
                    values: '-',
                    defaultVal: '-',
                },
                {
                    params: 'header-cell-style',
                    des: '表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style',
                    type: 'Object | Function({ row, column, rowIndex, columnIndex })',
                    values: '-',
                    defaultVal: '-',
                },
                {
                    params: 'empty-text',
                    des: '空数据时显示的文本内容',
                    type: 'String',
                    values: '-',
                    defaultVal: '\'暂无数据\'',
                },
                {
                    params: 'default-expand-all',
                    des: '是否默认展开所有行',
                    type: 'Boolean',
                    values: 'true | false',
                    defaultVal: 'false',
                },
                {
                    params: 'expand-row-keys',
                    des: '可以通过该属性设置 Table 目前的展开行，该属性为展开行的 row-key 组成的数组(indexConfig.type = "expand" 时有效)',
                    type: 'Array',
                    values: '-',
                    defaultVal: '-',
                },
                {
                    params: 'default-sort',
                    des: '指定默认的排序的列和排列顺序。 prop 为排序列的code，order 为排序的顺序（"ascending" | "descending"）',
                    type: 'Object',
                    values: '示例：{ prop: \'date\', order: \'descending\' }',
                    defaultVal: '-',
                },
                {
                    params: 'tooltip-effect',
                    des: '溢出的 tooltip 的 effect 样式',
                    type: 'String',
                    values: '"dark" | "light"',
                    defaultVal: '"dark"',
                },
                {
                    params: 'tooltip-options',
                    des: '溢出 tooltip 的选项，详见 https://element-plus.org/zh-CN/component/tooltip.html#attributes',
                    type: 'Object',
                    values: '-',
                    defaultVal: '{ enterable: true, placement: \'top\', showArrow: true, hideAfter: 200, popperOptions: { strategy: \'fixed\' } }',
                },
                {
                    params: 'show-summary',
                    des: '是否在表尾显示合计行',
                    type: 'Boolean',
                    values: 'true | false',
                    defaultVal: 'false',
                },
                {
                    params: 'sum-text',
                    des: '合计行第一列的文本',
                    type: 'String',
                    values: '-',
                    defaultVal: '\'合计\'',
                },
                {
                    params: 'summary-method',
                    des: '自定义的合计计算方法',
                    type: 'Function({ columns, data })',
                    values: '-',
                    defaultVal: '-',
                },
                {
                    params: 'span-method',
                    des: '合并行或列的计算方法',
                    type: 'Function({ row, column, rowIndex, columnIndex })',
                    values: '-',
                    defaultVal: '-',
                },
                {
                    params: 'select-on-indeterminate',
                    des: '在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。 若为 true，则选中所有行；若为 false，则取消选择所有行',
                    type: 'Boolean',
                    values: 'true | false',
                    defaultVal: 'true',
                },
                {
                    params: 'indent',
                    des: '展示树形数据时，树节点的缩进',
                    type: 'Number',
                    values: '-',
                    defaultVal: '16',
                },
                {
                    params: 'lazy',
                    des: '是否懒加载子节点数据',
                    type: 'Boolean',
                    values: 'true | false',
                    defaultVal: 'false',
                },
                {
                    params: 'load',
                    des: '加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息',
                    type: 'Function(row, treeNode, resolve)',
                    values: '-',
                    defaultVal: '-',
                },
                {
                    params: 'tree-props',
                    des: '展示树形数据时，渲染嵌套数据的配置选项',
                    type: 'Object',
                    values: '-',
                    defaultVal: '{ hasChildren: \'hasChildren\', children: \'children\' }',
                },
                {
                    params: 'table-layout',
                    des: '设置表格单元、行和列的布局方式',
                    type: 'String',
                    values: '"fixed" | "auto"',
                    defaultVal: '"fixed"',
                },
                {
                    params: 'scrollbar-always-on',
                    des: '总是显示滚动条',
                    type: 'Boolean',
                    values: 'true | false',
                    defaultVal: 'false',
                },
                {
                    params: 'show-overflow-tooltip',
                    des: '是否隐藏额外内容并在单元格悬停时使用 Tooltip 显示它们。这将影响全部列的展示',
                    type: 'Boolean',
                    values: 'true | false',
                    defaultVal: 'true',
                },
                {
                    params: 'flexible',
                    des: '确保主轴的最小尺寸，以便不超过内容',
                    type: 'Boolean',
                    values: 'true | false',
                    defaultVal: 'false',
                },
            ],
            eventData: [
                {
                    name: 'rendering-completed',
                    des: '列表数据渲染完成抛出的方法',
                    params: '-',
                },
                {
                    name: 'reset',
                    des: '点击重置按钮触发的事件',
                    params: '-',
                },
                {
                    name: 'validate',
                    des: '任一表单项被校验后触发',
                    params: '(prop, isValid, message)',
                },
                {
                    name: 'item-change',
                    des: '表单项的 change 事件，第一个参数为表单项的数据对象，包含表单项当前选中/输入的值(value)，值对应的名称(label)，当前选中的数据(data)；第二个参数为表单项对应的配置数据',
                    params: '({ value, label, data }, field)',
                },
                {
                    name: 'select',
                    des: '当用户手动勾选数据行的 Checkbox 时触发的事件; selection 为当前页选中的数据，realSelections 为所有页累计选中的数据',
                    params: '(realSelection, row, selection)',
                },
                {
                    name: 'select-all',
                    des: '当用户手动勾选全选 Checkbox 时触发的事件',
                    params: '(realSelection, selection)',
                },
                {
                    name: 'selection-change',
                    des: '当选择项发生变化时会触发该事件',
                    params: '(realSelection, selection)',
                },
                {
                    name: 'cell-mouse-enter',
                    des: '当单元格 hover 进入时会触发该事件',
                    params: '(row, column, cell, event)',
                },
                {
                    name: 'cell-mouse-leave',
                    des: '当单元格 hover 退出时会触发该事件',
                    params: '(row, column, cell, event)',
                },
                {
                    name: 'cell-click',
                    des: '当某个单元格被点击时会触发该事件',
                    params: '(row, column, cell, event)',
                },
                {
                    name: 'cell-dblclick',
                    des: '当某个单元格被双击击时会触发该事件',
                    params: '(row, column, cell, event)',
                },
                {
                    name: 'cell-contextmenu',
                    des: '当某个单元格被鼠标右键点击时会触发该事件',
                    params: '(row, column, cell, event)',
                },
                {
                    name: 'row-click',
                    des: '当某一行被点击时会触发该事件',
                    params: '(row, column, event)',
                },
                {
                    name: 'row-contextmenu',
                    des: '当某一行被鼠标右键点击时会触发该事件',
                    params: '(row, column, event)',
                },
                {
                    name: 'row-dblclick',
                    des: '当某一行被双击时会触发该事件',
                    params: '(row, column, event)',
                },
                {
                    name: 'header-click',
                    des: '当某一列的表头被点击时会触发该事件',
                    params: '(column, event)',
                },
                {
                    name: 'header-contextmenu',
                    des: '当某一列的表头被鼠标右键点击时触发该事件',
                    params: '(column, event)',
                },
                {
                    name: 'sort-change',
                    des: '当表格的排序条件发生变化的时候会触发该事件',
                    params: '({ column, prop, order })',
                },
                {
                    name: 'filter-change',
                    des: 'column 的 key， 如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件',
                    params: '(filters)',
                },
                {
                    name: 'current-change',
                    des: '当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性',
                    params: '(currentRow, oldCurrentRow)',
                },
                {
                    name: 'header-dragend',
                    des: '当拖动表头改变了列的宽度的时候会触发该事件',
                    params: '(newWidth, oldWidth, column, event)',
                },
                {
                    name: 'expand-change',
                    des: '当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）',
                    params: '(row, expandedRows | expanded)',
                },
            ],
            slotData: [
                {
                    name: 'more-operations',
                    des: '插入查询按钮后面，可用于添加其他按钮；参数为表单对象、列表数据(v1.0.10)、当前已勾选的行数据(v1.0.10)、列表当前页的查询参数(v1.0.10)；',
                    params: '{ form, data, selections, searchParams }',
                },
                {
                    name: 'form-slot-[searchConfig.fields[].code]',
                    des: 'searchConfig 查询配置内的控件对象（fields） 内的子配置项支持配置 type: \'slot\'，此时表单内部将开启对应插槽，插槽名为 "form-slot-" 拼接上该控件对象的 code',
                    params: '{ form, field, index }',
                },
                {
                    name: '[searchConfig.fields[].code]-input-prepend',
                    des: 'type 为 "text"、"password"、"table"、"tree" 的控件支持配置控件头部的内容插槽，插槽名为该控件对象的 code 拼接上 "-input-prepend"',
                    params: '{ form, field, index }',
                    version: 'v1.0.1',
                },
                {
                    name: '[searchConfig.fields[].code]-input-append',
                    des: 'type 为 "text"、"password"、"table"、"tree" 的控件支持配置控件尾部的内容插槽，插槽名为该控件对象的 code 拼接上 "-input-append"',
                    params: '{ form, field, index }',
                    version: 'v1.0.1',
                },
                {
                    name: '[searchConfig.fields[].code]-option',
                    des: 'type 为 "select" 的控件支持配置控件选项的内容插槽，插槽名为该控件对象的 code 拼接上 "-option"',
                    params: '{ option, options, field }',
                    version: 'v1.0.1',
                },
                {
                    name: 'operation-container',
                    des: '介于搜索框和表格之间的部分，可插入相关操作按钮',
                    params: '列表数据、当前已勾选的行数据、列表当前页的查询参数； { data, selections, searchParams }',
                },
                {
                    name: 'expand',
                    des: '当列表为可展开行（indexConfig.type="expand"）时，可以通过该插槽将自定义元素内容插入至展开行内，index表示该行在当前页的索引，realIndex表示该行在所有数据内的索引',
                    params: '{ row, index, realIndex }',
                },
                {
                    name: '[tableColumn[].code]',
                    des: '当表格列配置内的某个元素（tableColumn[n]）的type类型配置为 slot 时，组件内部将启用插槽来替换该列原始单元格展示的内容，插槽名为该控件对象的 code',
                    params: '{ row, column, index, realIndex }',
                },
                {
                    name: '[tableColumn[].headerSlotCode]',
                    des: '当表格列配置内的某个元素（tableColumn[n]）配置了 headerSlotCode 字段时，组件内部将启用该列列头插槽，插槽名为该列配置的 headerSlotCode 所设置的内容',
                    params: '{ column, config, index }',
                },
            ],
            refData: [
                {
                    name: 'search',
                    des: '手动触发查询按钮的点击（分页参数会被初始化）',
                    params: '-',
                    return: '-',
                },
                {
                    name: 'reset',
                    des: '手动触发重置按钮的点击',
                    params: '-',
                    return: '-',
                },
                {
                    name: 'getSearchForm',
                    des: '获取当前查询表单 formData 数据，支持直接改写',
                    params: '-',
                    return: 'formData',
                },
                {
                    name: 'getSearchParams',
                    des: '获取当前接口查询参数',
                    params: '-',
                    return: 'searchParams',
                },
                {
                    name: 'validate',
                    des: '对整个查询表单的内容进行验证。 支持接收一个callbcak，验证完成后会执行该 callbcak',
                    params: 'callback',
                    return: 'Promise<void>',
                },
                {
                    name: 'validateField',
                    des: '验证具体的某个字段',
                    params: '(fieldProps | undefined, callback)',
                    return: 'FormValidationResult',
                },
                {
                    name: 'resetFields',
                    des: '重置该表单项，将其值重置为初始值，并移除校验结果',
                    params: 'fieldProps | undefined',
                    return: '-',
                },
                {
                    name: 'getTableData',
                    des: '重新获取表格数据（可用于外部调用刷新列表，与上面的 search 方法不同之处是，该方法会保存分页参数且不会执行表单校验逻辑，而是直接请求接口），该方法支持传入一个布尔值来控制是否保存数据之前的勾选状态；该方法会返回一个 Promise，接口调用成功后会把接口数据传出来',
                    params: 'saveChecked',
                    return: 'Promise',
                },
                {
                    name: 'clearSelection',
                    des: '清空所有选中',
                    params: '-',
                    return: '-',
                },
                {
                    name: 'getSelectionRows',
                    des: '返回当前页选中的行数据',
                    params: '-',
                    return: '-',
                },
                {
                    name: 'getRealSelectionRows',
                    des: '返回所有已选中的行数据（包含其他页的已选中数据）',
                    params: '-',
                    return: '-',
                },
                {
                    name: 'toggleRowSelection',
                    des: '用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）',
                    params: '(row, selected)',
                    return: '-',
                },
                {
                    name: 'toggleAllSelection',
                    des: '用于多选表格，切换全选和全不选',
                    params: '-',
                    return: '-',
                },
                {
                    name: 'toggleRowExpansion',
                    des: '用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）',
                    params: '(row, expanded)',
                    return: '-',
                },
                {
                    name: 'setCurrentRow',
                    des: '用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态',
                    params: 'row',
                    return: '-',
                },
                {
                    name: 'clearSort',
                    des: '用于清空排序条件，数据会恢复成未排序的状态',
                    params: '-',
                    return: '-',
                },
                {
                    name: 'clearFilter',
                    des: '传入由columnKey 组成的数组以清除指定列的过滤条件。 如果没有参数，清除所有过滤器',
                    params: 'columnKeys',
                    return: '-',
                },
                {
                    name: 'doLayout',
                    des: '对 Table 和查询表单进行重新布局。当数据更新或当Table、以及其祖先元素由隐藏切换为显示时，可能需要调用此方法',
                    params: '-',
                    return: '-',
                },
                {
                    name: 'sort',
                    des: '手动排序表格。 参数 prop 属性指定排序列，order 指定排序顺序',
                    params: '(prop: string, order: string)',
                    return: '-',
                },
                {
                    name: 'scrollTo',
                    des: '滚动到一组特定坐标',
                    params: '(options: ScrollToOptions | number, yCoord?: number)',
                    return: '-',
                },
                {
                    name: 'setScrollTop',
                    des: '设置垂直滚动位置',
                    params: 'top',
                    return: '-',
                },
                {
                    name: 'setScrollLeft',
                    des: '设置水平滚动位置',
                    params: 'left',
                    return: '-',
                },
                {
                    name: 'scrollToRow',
                    des: '滚动到指定行，参数可以是行数据row，也可以是指定行的rowKey',
                    params: '(config: rowData | number | string)',
                    return: '-',
                },
                {
                    name: 'scrollToRowIndex',
                    des: '根据行索引滚动到指定行',
                    params: 'rowIndex',
                    return: '-',
                },
            ],
        };
    },
};
</script>

<style lang="scss">
    .test-table {
        .example-box {
            .sib-table {
                height: 482px;
            }
        }
    }
</style>
